<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>单表增删改查demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
    <link rel="stylesheet" href="../resources/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../resources/css/bootstrap-vue.min.css"/>
<style type="text/css">
table, table thead th, table tr td {
	border: 1px solid #0094ff !important;
}
table {
	text-align: center;
	border-collapse: collapse;
	padding: 1px;
}

.indexW{
width: 50px;
color: red;
}


</style>    
  </head>
<body>
<div id="app" class="container-fluid" >
	

<div class="row">
	<div class="col-sm-12">
		<table>
			<thead>
				<tr>
					<th>行号</th>
					<th>方法</th>
					<th>类名</th>
					<th>请求类型</th>
					<th>地址</th>
					<th>备注</th>
				</tr>
			</thead>
			<tr v-for="(obj,index) in list">
				<td>{{index+1}}</td>
				<td>{{obj.method}}</td>
				<td>{{obj.className}}</td>
				<td>{{obj.type}}</td>
				<td>{{obj.url}}</td>
				<td>{{obj.remark}}</td>
			</tr>
		</table>
	</div>
</div><!-- row2 -->


</div><!-- app -->
<!-- end 添加模板  -->
<script src ="../resources/js/vue.min.js"></script>
<script src ="../resources/js/bootstrap-vue.min.js"></script>
<script src ="../resources/js/axios.min.js"></script>
<script src ="../resources/js/vue-axios.min.js"></script>
<script src ="../resources/js/app.js"></script>

<script type="text/javascript">
new Vue({
	el : '#app'
    ,data:function(){
		     return	{
		        
		        list: [] //数据
		        
		    }
    }//data
    ,computed: {
        
    }
    ,mounted: function() {
    	this.listPage();//加载时加载列表
	}
    ,methods:{
      listPage:function(){
    		 var url="/demo/mappings"
    		 this.$http.post(url,{}).then((data)=> {
       	         this.list=data;
	       	 });
      }	 
    }
});
</script>
</body>
</html>
